<!--  @author:ymy  -->
<template>
  <div class="discuss" @scroll="scrollEvent">
    <div class="top">
      <div class="title" v-for="item in head" :key="item.id">
        <span>置顶</span>
        <p>{{ item.title }}</p>
      </div>
    </div>
    <div class="content">
      <div class="discuss-content">
        <div class="list-title">
          <img src="https://assets-cdn.lanqb.com/pc_community/icon-recommend.svg" class="icon" />
          <div :class="{ active: active == 1 }" @click="active = 1">最新作品</div>
          <div :class="{ active: active == 0 }" @click="active = 0">精选作品</div>
        </div>
        <div class="content-item" v-for="item in list" :key="item.id">
          <div class="item-text">
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
            <div
              :class="{
                'content-img': item.works.slice(0, 3).length < 3,
                'content-img-3': item.works.slice(0, 3).length == 3,
              }"
            >
              <img
                :src="'https://ss.lanqb.com/' + imgs.url + '?imageView2/1/w/220/h/165'"
                alt=""
                v-for="(imgs, index) in item.works.slice(0, 3)"
                :key="index"
              />
            </div>
          </div>
          <div class="item-footer">
            <div class="item-date">{{ item.update_time }}</div>
            <div class="item-info">
              <span><van-icon name="like-o" />{{ item.statistics.like_num }}</span>
              <span><van-icon name="chat-o" />{{ item.statistics.comment_num }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Discuss',
  data() {
    return {
      active: 1,
      head: [],
      list: [],
      curPage: 1,
    };
  },
  created() {
    this.loadMoreGet('/lqb/api/works?type=2&page=1&limit=8').then(({ data }) => {
      this.list = data;
    });
    this.loadMoreGet('/lqb/api/works/topicHead').then((data) => {
      this.head = data;
    });
  },
  methods: {
    scrollEvent(e) {
      const st = e.target.scrollTop;
      const totalHeight = e.target.scrollHeight;
      const clientHeight = e.target.clientHeight;
      if (st + clientHeight >= totalHeight) {
        this.curPage++;
        this.loadMoreGet(`/lqb/api/works?type=2&page=${this.curPage}&limit=8`).then(({ data }) => {
          this.list = this.list.concat(data);
        });
      }
    },
    async loadMoreGet(url) {
      const response = await this.axiosRq(url, 'GET');
      return response;
    },
  },
};
</script>
<style lang="less" scoped>
html {
  overflow: hidden;
}
.discuss {
  overflow: auto;
  height: 528px;
  background-color: #f4f4f4;
  > .top {
    background-color: white;
    width: 100vw;
    height: 0.96rem;
    padding: 0.075rem 0.1rem;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 0.1rem;
    > .title {
      font-size: 0.14rem;
      display: flex;
      height: 0.22rem;
      line-height: 0.22rem;
      padding: 0.05rem 0;
      // padding-left: 0.1rem;
      > span {
        display: inline-block;
        height: 0.17rem;
        width: 0.24rem;
        background-color: #f36b61;
        color: white;
        font-size: 0.12rem;
        text-align: center;
        padding: 0 0.04rem;
        margin-right: 0.07rem;
      }
      > p {
        font-size: 0.14rem;
      }
    }
  }
  > .content {
    background-color: #f4f4f4;
    > .discuss-content {
      position: relative;
      background-color: #f4f4f4;
      > .list-title {
        display: flex;
        padding-left: 0.3rem;
        height: 0.4rem;
        line-height: 0.4rem;
        border-bottom: 0.01rem solid #e6e6e6;
        font-size: 0.14rem;
        color: #a4a4a4;
        background-color: white;
        div {
          margin-left: 0.1rem;
        }
        img {
          position: absolute;
          top: 0.1rem;
          left: 0.1rem;
          width: 0.18rem;
          height: 0.18rem;
        }
      }
      .active {
        border-bottom: 0.03rem solid #222222;
        color: #222222;
      }
      > .content-item {
        background-color: white;
        padding: 0.14rem 0.12rem 0.1rem;
        margin-bottom: 0.1rem;
        > .item-text {
          margin-bottom: 0.05rem;
          h4 {
            font-size: 0.17rem;
            font-weight: normal;
          }
          p {
            font-size: 0.15rem;
            color: #878787;
            margin-top: 0.1rem;
          }
          > .content-img {
            display: flex;
            justify-content: space-between;
            align-items: center;
            img {
              width: 1.75rem;
              height: 1.31rem;
            }
          }
          > .content-img-3 {
            img {
              width: 1.13rem;
              height: 0.85rem;
            }
          }
        }
        > .item-footer {
          height: 0.2rem;
          display: flex;
          justify-content: space-between;
          color: #a4a4a4;
          border-top: 0.01rem solid #e6eaeb;
          padding: 0.1rem 0;
          margin-top: 0.1rem;
          > .item-date {
            font-size: 0.12rem;
            margin-left: 0.2rem;
          }
          > .item-info {
            span {
              font-size: 0.13rem;
              margin: 0.2rem;
              /deep/ .van-icon {
                margin-right: 0.06rem;
                font-size: 0.15rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
